<template>
	<div class="yellow">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>全部评论</h2>
			<div class="back">&nbsp;</div>
		</div>
		<div class="abox">
			<div class="commit">
				<div class="protitle flex">
					<div class="proImage"><img :src="productInfo.frontPicUrl"></div>
					<div class="info flex col jlr">
						<div class="top">
							<h2>{{productInfo.productName }}</h2>
							<h4><span class="color">颜色：{{productInfo.colorName}} </span><span>{{productInfo.specsName}}</span></h4>
						</div>
						<h3>￥{{productInfo.price}}</h3>
					</div>
				</div>
				<!--产品展示-->

				<ul class="commitlist">
					<li v-for="(v,i) in EvalList" :key="i">
						<div class="commit">
							<div class="title flex a-center jlr">
								<div class="flex a-center">
									<div class="commitx"><img :src="v.headImgurl"></div>
									<h4>{{v.memberName}}</h4>
								</div>
								<van-rate v-model="v.evalStars" :size="20" void-icon="star" void-color="#eee" readonly />
							</div>
							<div class="committext">
								{{v.evalDesc}}
							</div>
							<div class="commitImage" v-if="v.evalPicList.length">
								<div class="item" v-for="(item,index) in v.evalPicList" @click="picshow(v.evalPicList,i)"><img v-lazy="item.picUrl">
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import { ImagePreview } from 'vant';
	Vue.use(ImagePreview);
	
	export default {
		data() {
			return {
				value: 4,
				EvalList: [],
				productInfo: {}
			}
		},
		activated() {
			this.init()
		},
		methods: {
			init() {
				this.$ajax.getProductInfoEval({
					productId: this.$route.query.id
				}).then(res => {
					if (res.code == 0) {
						this.EvalList = res.data.EvalList,
						this.productInfo = res.data.product
					}
				})
			},
			picshow(arr, i) {
				var sarr = arr.map(el=>el.picUrl)
				ImagePreview({
					images:sarr,
					startPosition:i+1
				});
			},
			back() {
				this.$router.go(-1)
			}
		}
	}
</script>
